<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>abrance</title>
    <link rel="icon" href="/static/favicon.ico">
    <style type="text/css">
        @import "/static/style.css";
    </style>
</head>

<script type="text/javascript" src="/static/script/http_cdn.bootcdn.net_ajax_libs_jquery_1.11.3_jquery.js"></script>
<script type="text/javascript" src="/static/script/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/utils.js"></script>
<script type="text/javascript" src="/static/titles.js"></script>


<script>
    let user = null;
    let primary_id = null;
    let comment_ls = Array();
    let comment_ls_length = 0;
    let last_modify_time = "";

    function title_show(response) {
        let code = response["code"];
        if (code === 200)
        {
            const res = response['res'];
            comment_ls = res['comment_ls'];
            comment_ls_length = comment_ls.length;
            const create_time = res['create_time'];
            last_modify_time = res['last_modify_time'];
            const nickname = res['nickname'];
            const primary_id = res['primary_id'];
            const subtitle = res['subtitle'];
            const title = res['title'];
            const title_id = res['title_id'];

            // TODO 这里 small下面 nickname 应用a标签做一个用户信息查询的跳转
            let title_window = `<div class="title-style"><h1>${title}</h1></div> <div class="create_time-style"> <small class="small-style"> <span>${nickname}</span> . <span>创建自${create_time}</span> </small> </div>`;
            let subtitle_window = `<div class="subtitle-style"><div id="subtitle-content">${subtitle}</div></div>`;
            $(".title-user").append(title_window + subtitle_window);

            // 留言加入
            let comment_tb = $("#title-comment-tb");
            comment_ls.forEach((obj, index) => {
                const comment_id = obj["comment_id"];
                const create_time = obj["create_time"];
                const nickname = obj["nickname"];
                const primary_id = obj["primary_id"];
                const comment = obj["text"];
                const comment_ele =
                    `<tr>
                        <td class="tr-nickname-style">${nickname}</td>
                        <td>
                            <div class="tr-comment-style">
                                <p>${comment}</p>
                                <br>
                                <small>
                                    <span class="title-small">
                                        <a class="span-a-nickname">${nickname}</a>
                                        <span class="span-time">创建自${create_time}</span>
                                    </span>
                                </small>
                            </div>
                        </td>
                    </tr>`;
                comment_tb.append(comment_ele);
            })
        } else if (code === 400)
        {
            alert('获取页面失败');
        } else
        {
            alert('未知的错误');
        }
    }

    function post_comment(title_id_e) {
        if (user && primary_id)
        {
            const comment = $("#editor-comment").val();
            const title_id = title_id_e.data;
            console.log(title_id, primary_id, user, comment);
            if (comment.length > 0 && comment.trim().replace(/\s/g,"").length > 0)
            {
                $.ajax({
                    type: "POST",
                    url: "/lichen/create_comment",
                    data: {
                        title_id: title_id,
                        primary_id: primary_id,
                        username: user,
                        comment: comment,
                    },
                    dataType: "JSON",
                    success: post_success
                })
            } else
            {
                alert("内容为空");
            }
        } else
        {
            alert("先登录");
        }
    }

    $(function (){
        user = $.cookie('user');
        primary_id = $.cookie('primary_id');
        if (user && primary_id)
        {
            append_users_info();
        } else
        {
        }

        let title_id_str = window.location.href;
        title_id_str = title_id_str.split('/').pop();

        $.ajax({
            type: "GET",
            async: false,
            url: `/lichen/title/${title_id_str}`,
            success: title_show
        })
        let sep_str = ``;
        if (comment_ls_length===0)
            sep_str = `<small class="small-style"><span>${comment_ls_length}条留言</span></small>`;
        else
            sep_str =
                `<small class="small-style"><span>${comment_ls_length}条留言</span>.<span>最后留言自${last_modify_time}</span></small>`;
        $(".title-comments-sep").append(sep_str);

        $(".editor-submit").click(title_id_str, post_comment)
    })
</script>

<body>

<div id="TOP">
<!-- TODO 这部分用于导航等布置 -->
</div>
<div id="Wrapper">
<!--  除了导航和底部样式以外的所有  -->
    <div class="content">
    <!--    内容    -->

    </div>
    <div class="sep">
    <!--    分隔线    -->
    </div>
</div>
<div id="Bottom">
<!--  底部  -->
</div>

<header class="header-expr-class" id="title-header">
    <div class="header">
        <div class="header-left">
            <p>
                <a class="link-a-style"> <<< </a>
            </p>
        </div>
        <div class="header-right">
            <div class="user-info"></div>
        </div>
    </div>
</header>
<section class="big_table">
    <div class="big_tb_row">
        <div class="label-domain">
            <!--      将节点都放在这里      -->
        </div>
        <div class="main-domain">
            <div id="main-view">
                <div class="title-part">
                    <div class="title-user">
                    </div>
                </div>
                <div class="title-comments-sep">
                </div>
                <div class="g_view">
                    <table id="title-comment-tb">
                        <tr>
                            <th>
                                character
                            </th>
                            <th>
                                comment
                            </th>
                        </tr>
                        <tr>
                            <td>

                            </td>
                        </tr>
                    </table>
                </div>

                <div class="editor">
                    <div class="upon-editor">
                        <div class="editor-gap">
                            <!--         放用户信息               -->
                        </div>
                        <div id="title-editor">
                            <div class="editor-input">
                                <label>
                                    <textarea id="editor-comment" maxlength="500" cols="5" placeholder="正文" spellcheck="false"></textarea>
                                </label>
                            </div>
                            <div class="editor-button">
                                <button class="editor-submit">comment</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tb-side">

        </div>
    </div>
</section>

<footer class="footer-style">
    footer
</footer>


</body>
</html>